<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>简单题编辑</span>
      </div>
      <el-form :model="form" ref="form" label-width="50px" :rules="rules">
        <el-row>
          <el-col :span="16">
            <el-form-item required label="题干" prop="questionTitle">
              <el-input
                type="text"
                v-model="form.questionTitle"
                placeholder="请输入标题"
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="16">
            <el-form-item label="答案" prop="correct">
              <el-input v-model="form.correct" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="难度" prop="difficult">
              <el-select
                clearable
                v-model="form.difficult"
                placeholder="请选择题目难度"
              >
                <el-option
                  v-for="item in questionDifficultEnum"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="学科" prop="subjectId">
              <el-select
                clearable
                v-model="form.subjectId"
                placeholder="请选择学科"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.subjectId"
                  :label="item.subjectName"
                  :value="item.subjectId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="排序" prop="orderNum">
              <el-input-number
                style="width: 200px"
                v-model="form.orderNum"
                placeholder="请输入排序"
                :min="1"
                controls-position="right"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item required label="总分" x prop="questionScore">
              <el-input-number
                :precision="1"
                style="width: 200px"
                v-model="form.questionScore"
                placeholder="请输入题目总分"
                :min="1"
                :max="100"
                controls-position="right"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="解析" prop="info">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                v-model="form.info"
                placeholder="请输入解析"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm">{{
              $route.query.questionId ? "修改" : "创建"
            }}</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { questionDifficultEnum } from "@/enum/exam/question";
import { getQuestion, addQuestion, updateQuestion } from "@/api/exam/question";
import { listSubject } from "@/api/exam/subject";
export default {
  name: "shortAnswer",

  data() {
    return {
      // 题目难度常量枚举
      questionDifficultEnum,
      //  学科列表
      subjectList: [],
      form: {
        questionTitle: "",
        orderNum: null,
        subjectId: null,
        questionScore: null,
        difficult: null,
        info: "",
        questionType: 5,
        correct: "",
        questionItems: null,
      },
      rules: {
        questionTitle: [
          {
            required: true,
            message: "题干不能为空",
            trigger: "blur",
          },
          {
            max: 100,
            message: "题干不能超过100个字符",
            trigger: "blur",
          },
        ],

        questionScore: [
          {
            required: true,
            message: "题目总分不能为空",
            trigger: "blur",
          },
        ],
        info: [
          {
            max: 200,
            message: "不能超过200个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    const { questionId } = this.$route.query;

    if (questionId) {
      this.getQuestionById(questionId);
    }
    // console.log(questionId)
    this.getSubjectList();
  },
  methods: {
    /** 查询学科列表 */
    async getSubjectList() {
      try {
        let { data } = await listSubject();
        this.subjectList = data.records;
      } catch (error) {
        this.$modal.error("获取学科失败");
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.$route.query.questionId != null) {
            updateQuestion(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addQuestion(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
            });
          }
          this.$router.push("/question/index");
        }
      });
    },
    // 获取单个详情
    async getQuestionById(questionId) {
      let response = await getQuestion(questionId);
      const { data } = response;
      this.form = data;
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.form = {
        questionTitle: "",
        orderNum: null,
        subjectId: null,
        questionScore: null,
        difficult: null,
        info: "",
        questionType: 5,
        correct: "",
        questionItems: null,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
</style>